<template>
  <div class="convent">
    <div class="convent-input">
      <Rgb />
      <div class="colors-container" :style="{ backgroundColor: `${color}` }" @click.self="cpValue(cv)"/>
      <Hex />
    </div>
    <Doubt :tips="tips"/>
  </div>
</template>

<script lang="ts">
import Doubt from '../Doubt/index.vue'
import Rgb from './Rgb/index.vue'
import Hex from './Hex/index.vue'
//@ts-ignore
import store from "@/store/index.js";
import {computed, ref, watch} from 'vue'
import {hasHex,cpValue} from "@/utils/tool";

export default {
  // 颜色值 # 或 rgb()
  components: { Doubt,Rgb,Hex },
  setup() {
    const tips= ['可以直接输入rgb或hex的颜色值进行转换,点击RGB/HEX就可以复制当前的颜色值了,下面还有对应的其他颜色值']
    const color = ref('')
    const cv = ref('R:255 G:255 B:255 HEX:#FFFFFF')
    const conv = computed(() => store.state.convent)
    watch(conv,(newValue) => {
      if(newValue.tag === 'FRGB') {
        const rgb = JSON.parse(JSON.stringify(newValue.rgb));
        color.value = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
        cv.value = `R:${rgb[0]} G:${rgb[1]} B:${rgb[2]} HEX:#${newValue.hex}`
      }
      if(newValue.tag === 'FHEX') {
        const hex = JSON.parse(JSON.stringify(newValue.hex));
        const rgb = JSON.parse(JSON.stringify(newValue.rgb));
        const hexChange = hasHex(hex) ? hex: '#' + hex;
        color.value = hexChange
        cv.value = `R:${rgb[0]} G:${rgb[1]} B:${rgb[2]} HEX:${hexChange}`
      }
    },{
      immediate: false,
      deep: true
    })
    return {
      color,cpValue,cv,tips
    }
    
  },
}

</script>

<style scoped lang="scss">
.convent {
  display: flex;
  width: 33%;
  margin-left: 20px;
}

.convent-input {
  width: 80%;
  display: flex;
  padding: 0.375rem 0.3rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 1.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.colors-container {
  width: 23%;
  height: 28px;
  margin: 0 9px;
  box-shadow: 1px 1px 6px #cccccc;
}


/* 超小设备 (手机, 478px 以下屏幕设备) */
@media only screen and (max-width: 478px) {
  .convent {
    width: 98%;
  }
}

/* 小设备 (平板电脑和大型手机，500 像素及以上) */
@media only screen and (min-width: 500px) {
  .convent {
    width: 85%;
  }
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
  .convent {
    width: 62%;
  }
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {
  .convent {
    width: 54%;
  }
}

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
  .convent {
    width: 45%;
  }
}

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {
  .convent {
    width: 33%;
  }
}


</style>
